<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>treeGrid</title>
    <link rel="stylesheet" href="../../js/css/layui.css">
</head>

<body>
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
<script type="text/html" id="toolbarDemo">
    <div class="">
        <div class="layui-input-item">
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm padding_top" onclick="addrrr()">添加</button>
            </div>
        </div>

    </div>
</script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="发布|未发布" lay-filter=""sexDemo {d.id=1003 ? 'checked' :  ''}}>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../layui.js"></script>
<script>
    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: '../lay/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        treeGrid.render({
            elem: '#treeTable'
            //,url:'json/treeData.json'
            ,data:[
                {"id":"113", "pId":0,  "name":"植物(自定义图标)","lay_icon_open":"png","lay_icon_close":"1_close"},
                {"id":"114", "pId":"113",  "name":"大叶榕(自定义图标)","lay_icon":"/img/4.png"},
                {"id":"112", "pId":null,  "name":"动物(默认单选)","lay_is_radio":true},
                {"id":"115", "pId":"112",  "name":"大笨象"},
                {"id":"1", "pId":null,  "name":"水果"},
                {"id":"101", "pId":"1","name":"苹果","lay_is_open":false},
                {"id":"102", "pId":"1", "name":"香蕉"},
                {"id":"103", "pId":"1", "name":"梨"},
                {"id":"104", "pId":"101", "name":"红富士苹果"},
                {"id":"105", "pId":"101", "name":"红星苹果"},
                {"id":"106", "pId":"101", "name":"嘎拉"},
                {"id":"107", "pId":"101", "name":"桑萨"},
                {"id":"108", "pId":"102", "name":"千层蕉（禁止多选）","lay_che_disabled":true},
                {"id":"109", "pId":"102", "name":"仙人蕉","lay_is_checked":true},
                {"id":"110", "pId":"102", "name":"吕宋蕉(禁止单选)","lay_is_checked":true,"lay_rad_disabled":true},
                {"id":"111", "pId":"1", "name":"大西瓜","lay_is_open":false},

            ]
            ,cellMinWidth: 100
            ,idField:'id'//必須字段
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'pId'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            ,heightRemove:[".dHead",10]//不计算的高度,表格设定的是固定高度，此项不生效
            ,height:'100%'
            ,toolbar: '#toolbarDemo'
            ,isFilter:false
            ,iconOpen:true//是否显示图标【默认显示】
            ,isOpenDefault:true//节点默认是展开还是折叠【默认展开】
            ,loading:true
            ,method:'post'
            ,isPage:false
            ,cols: [[
                {type:'numbers'}
                ,{type:'checkbox'}
                ,{field:'name', width:300, title: '菜单名称',edit:'text'}
                ,{field:'id',width:100, title: 'id'}
                ,{field:'pId', title: '是否启用',templet: '#switchTpl'}
                ,{width:100,title: '操作', align:'center',toolbar: '#barDemo',}
            ]]
        });

        treeGrid.on('tool(treeTable)',function (obj) {
            switch(obj.event){
                case 'edit':
                    alert("1");
                    break;
                case 'del':
                    alert("2");
                    break;
            }
        });

    });
    function addrrr() {
        var openwin=layer.open({
            type:2,
            title:"国内新闻添加",
            content:'./menuManAdd.html',
            area:['100%','100%'],
            maxmin:true,
        });
        layer.full(openwin);
    }
</script>
</body>
</html>